Skip to content

Directions Plugin for Mappls Web Maps

Easy To Integrate Routing APIs & Map SDKs For Web Applications

Powered with India's most comprehensive and robust mapping functionalities. Now Available for 200+ nations and territories accross the world.

Document Version History

Version Last Updated Team Author Remarks
1.0 07 Aug 2025 SDK Product Team Prabhjot Kaur (PK) OAuth 2

Getting Access

Before using the API in the your solution, please ensure that the related access is enabled in the Mappls Console, within your app - be it for Mobile OR Web or Cloud integration.

  1. Copy and paste the key from your credentials section from your API keys into the access_token query parameter.

    • Your static key can be secured by whitelisting its usage for particular IPs (in case of cloud app usage) OR a set of domains (in case of a web app)
    • Your static key obtained from your Console is to be passed as a query parameter: access_token.

  2. The sample codes are provided on our domain to help you understand the very basic functionality of Mappls Direction Plugin. See Sample Codes here

Authentication Object - access_token mandatory query parameter.

  • access_token: "hklmgbwzrxncdyavtsuojqpiefrbhqplnm".

Introduction to Directions Plugin

This plugin, offered by Mappls Plugins for Web, uses integrated places searches for directions for several modes of transportation, including driving, biking and walking.

The plugin offers the following basic functionalities:

  1. Integrated support of Mappls(MapmyIndia) Place search for searching locations of origin, destinations and via points.
  2. It allows to use origin and destinations in Mappls's digital address (semicolon separated) eLoc or WGS 84 geographical coordinates both.
  3. The ability to set the vehicle profile like driving, biking,trucking and walking.
  4. Easily set the resource for traffic and ETA information.

For details, please contact apisupport@mappls.com.

Sample Implementation

The quickest way to integrate is to copy the plug-n-play sample code snippets into your code.

Let the fun begin !

Visit the samples for assistance to create a sample implementation with your own keys.

For detailed understanding of the plugin, Let’s get started!

Plugin's configurations

Adding the Directions plugin in the script

Script URL

<script src="https://sdk.mappls.com/map/sdk/plugins?access_token=<Static Key>&v=3.0&libraries=direction"></script>

Method

mappls.direction()

Properties

Mandatory

  1. map(object): vector map or raster map object from respective Mappls Map SDKs.

Example

mappls.direction({map:map,start:"28.545,77.545",end:{label:'India Gate, Delhi',geoposition:"1T182A"}});

Optional Parameters

  1. start (string): Mappls Pin(Eloc) or lat,long.
  2. end (string): Mappls Pin(Eloc) or lat,long.
  3. resource (string): Default is route_adv and can be changed to route_eta or route_traffic as per requirement.
  4. profile (string): Default driving for four wheelers and can be changed to biking and trucking for two wheelers and heavy vehicles respectively.
  5. rtype (boolean): type of route required for navigation, where values mean:
  6. 0: optimal (default)
  7. 1: shortest (it will calculate route by excluding access penalties like private roads, etc.)
  8. bearings(integer): Limits the search to segments with given bearing in degrees. The referencing will be to the true north and in clockwise direction. (shall be part of premium offering)
  9. alternatives: Search for alternative routes. Passing a number: e.g. alternatives=n searches for up to n alternative routes. Please note that even if alternative routes are requested, a result cannot be guaranteed.
  10. radiuses: Limits the search to given radius in meters. For all way-points including start and end points. {radius};{radius}[;{radius} ...]. (shall be part of premium offering).
  11. steps(boolean): Return route steps for each route leg. Possible values are true/false. By default it will be used as true.
  12. stepPopup: Possible values are true/false //By default false. If set true, steps written in popups will be shown.
  13. stepIcon: Possible values are true/false //By default true. If set true, step icon will be visible.
  14. exclude(string): Additive list of road classes to avoid, order does not matter. Possible values are toll, motorway & ferry. Multiple values can be selected.
  15. start_icon (string): To set the icon for start point.
    • Example: 
        start_icon: {
            url: '2.png',
            width: 30, //optional
            height: 40 //optional
        }

    OR

         start_icon: {
            html: " < div > < img src = 'pin.png' > < /div>",
            width: 30, //optional
            height: 40, //optional
            offset:[20,40] //optional

        }
  1. end icon (string) : To set the icon for end point.
  2. iconPopup : Possible values are true/false. Sets popup for start, via and end icons. //By default true.
  3. via: (object) : To add a geo positions between start and end points.
    • Example: For single via Point
        via: {
            label: 'mathura', //optional
            geoposition: "28.544, 77.4541"
        }

- Example: For multiple via Points, user must pass the via points as array

        via:
        [
            {
                label:'mathura',
                geoposition:"28.544,77.4541"
            },
            {
                label:'Koshi',
                geoposition:"28.144,77.4541"}],
  1. via_icon (object): To set the icon for via points,
    • Example: 
        via_icon:
        {
            url:'1.png',
            width:20,
            height:40
        }

    OR

        via_icon:
        {
            html: <div> <img src = 'pin.png' > 1</div>, 
            width: 20,
            height: 40
        }
  1. fitbounds: (boolean). Used to fit the route to in map view bound. Default is true.
  2. search : Referred to the intergarated Mappls Search. Default remains true.
  3. divId: The HTML where developer wishes results to be displayed.
  4. divWidth: (in pixels) For customizing or improving results display UI.
  5. autoSubmit : Property that will be called when user directly want to display the results. Default remains true.
  6. geolocation: boolean value used to enable or disable current location selection . Default is true.
  7. maxVia: Property that helps to limit the number of viapoints in any route. maximum Value up to 98.
  8. searchChars : number of characters required to start search. ie searchChars:2
  9. pod: Place type which you want to restrict the results by. e.g. pod:'city'. Valid values are:
    • SLC (sub locality)
    • LC (locality)
    • CITY
    • VLG (village)
    • SDIST (sub district)
    • DIST (district)
    • STATE
    • SSLC (sub sub locality)
    • POI (place of interest)
  10. distance: boolean value used to show aerial distance from location passed in location. of the searched place in results listing e.g. distance:true
  11. hyperLocal: This parameter lets the search give results that are hyper-localized to the reference location passed in the location parameter. This means that nearby results are given higher ranking than results far from the reference location. Highly prominent results will still appear in the search results, however they will be lower in the list of results. This parameter will work ONLY in conjunction with the location parameter.
  12. location: location coordinates which will be used as radial bias search (not restriction; only BIAS). e.g. location:[28.61, 77.23]
  13. routeColor : To configure the route colors displayed on the map. The colors will be applied in order of the route suggested. Will accept rgb, Hex code as well as color names.For Eg: If only one color is suggested then the most prior route color would be changed and rest routes will be shown in default colors. User can configure as many colors as per suggestions.
  14. strokeWidth : To assign width of the route.The width will be applied in order of the route suggested. Default value is 4.For Eg: If only one width is suggested then the most prior route width would be changed and rest routes will be shown in default width. User can configure as many widths as per suggestions.
  15. borderColor : To assign color to the outline of the route.The colors will be applied in order of the route suggested. Will accept rgb, Hex code as well as color names.For Eg: If only one color is suggested then the most prior route color would be changed and rest routes will be shown in default color. User can configure as many colors as per suggestions.
  16. activeColor : To configure the color of Active Route. Please note If routeColor is assigned then activeColor will hide the first suggested route.Will accept rgb, Hex code as well as color names.
  17. activeStrokeWidth : To assign width of the route. Default value is 7.
  18. callback: (function). To get callback data after route plotted.
  19. routeIndex: (function) - To get the route index number and route name(if present).
  20. collapse : To minimise the entire direction plugin in left direction. Available only for Top left position. Default is false. This parameter is also available in form of method in callback function. Refer below to use the function
       collapse:function(data){console.log(data);},
  1. connector : To show the connecting line with start and end location with the route. Default is false.

Additional Parameter - alongTheRoute

  1. alongTheRoute : true/false. Default is false.

    To access this parameter , please contact API Support This parameter takes the encoded route along which POIs will be searched.

    This parameter is further having many configurable options listed below.

    • buffer: 200, // Buffer of the road. Minimum value is 25m, maximum is 1000m and default is 25m
    • sort: false, //default is true

    • category:

      • catCode: 'FINATM', //The POI category code to be searched. Only one category input supported by default
      • icon: "icon image path " //absolute path of the desired image
      • width: '30px' //width of the icon image
      • height: '30px' //height of the icon image
      • label: 'Restaurants' the name user puts to show the category. For Eg: "Restaurants"

    • page: 1, // Used for pagination, Default is 1

    • poicallback: to get data of alongtheroute pois.

      If the user does not want to use the UI - PoiAlong the route , then he can use below additional paremeters to get the API response with other parameters of direction Plugin.

      • catCode :'FINATM', to define the catagory for result
      • poicallback: function (data)

Refer to the Code Snippet if the you need to configure the default options.

    alongTheRoute: 
        {
            options: 
                {
                    "page": 1,
                    "buffer": 1000,
                    "sort": false
                },
            category: 
                [
                    { 
                        catCode: 'FINATM', 
                        icon: "custom icon url", 
                        width: '30px', 
                        height: '30px',
                        label:'ATM'
                    },
                    { 
                        catCode: 'HOTALL', 
                        icon: "custom icon url", 
                        width: '30px', 
                        height: '30px',
                        label:'Hotels'
                    }
                ],
            poicallback: function(data)
                { 
                    console.log(data);
                }
        }

*Advisory - Route length should not be more than 30 kms long for optimal behaviour

Additional Parameter - routeSummary

  1. routeSummary : true/false. Default is false. This feature allows to show the events reports along the route like road and safety, traffic conditions etc.
    To access this parameter , please contact API Support.

Refer to the Code Snippet if the you need to get the callback.

    routeSummary:
        {
            summarycallback: function(data)
                {
                    console.log(data);
                }
        },

For any queries and support, please contact:

Email us at apisupport@mappls.com

Support Need support? contact us!



@ Copyright 2022 CE Info Systems Ltd. All Rights Reserved.